import React, {useEffect, useState} from "react";
import {Layout, theme, Typography} from "antd";
import {AIMessageContent} from "../chat/AiMessageContent.tsx";
import {AiConversations} from "../chat/AiConversations.tsx";
import {RobotOutlined} from "@ant-design/icons";
import ThemeToggle from "../../components/ThemeToggle.tsx";
import {useTheme} from "../../context/ThemeContext.tsx";
import "../../styles/themes.css";
import FileUpload from "../../components/FileUpload.tsx";
import * as chatController from "../../api/chatController";
import {FeishuDocs} from "../chat/FeishuDocs.tsx";

const {Header, Content, Sider} = Layout;
const {Title} = Typography;

export const Home: React.FC = () => {
    const {
        token: {borderRadiusLG},
    } = theme.useToken();

    const {theme: currentTheme} = useTheme();
    const isInk = currentTheme === 'ink';

    const [conversations, setConversations] = useState<API.ConversationVO[]>([]);
    const [conversationId, setConversationId] = useState("");
    const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);

    useEffect(() => {
        // 使用新的API获取会话列表
        chatController.list().then((response) => {
            if (response.data && response.data.code === 0 && response.data.data) {
                setConversations(response.data.data);
                if (response.data.data.length > 0) {
                    setConversationId(response.data.data[0].conversationId || "");
                }
            }
        });
    }, []);

    const onConversationRemove = (removedId: string) => {
        const updates = conversations.filter(
            (value) => value.conversationId !== removedId,
        );
        setConversations(updates);
        if (conversationId === removedId && conversations.length > 0) {
            setConversationId(conversations[0].conversationId || "");
        } else {
            setConversationId(conversationId);
        }
    };

    const onTitleUpdate = (convId: string, title: string) => {
        setConversations(
            conversations.map((value) =>
                value.conversationId === convId ? {...value, title: title} : value,
            ),
        );
    };

    const handleFilesParsed = (fileIds: string[]) => {
        setUploadedFiles(fileIds);
    };

    return (
        <Layout style={{
            height: "100%",
            background: "var(--bg-color)",
            backgroundImage: `var(--pattern)`,
        }} className={isInk ? 'theme-ink' : 'theme-cartoon'}>
            <Header style={{
                background: `var(--gradient)`,
                display: 'flex',
                alignItems: 'center',
                padding: '0 24px',
                boxShadow: 'var(--shadow)',
                fontFamily: 'var(--font-family)',
                justifyContent: 'space-between'
            }}>
                <div style={{display: 'flex', alignItems: 'center'}}>
                    <RobotOutlined style={{color: 'white', fontSize: 24, marginRight: 12}}/>
                    <Title level={4} style={{
                        color: 'white',
                        margin: 0,
                        fontFamily: 'var(--font-family)',
                        letterSpacing: '1px'
                    }}>AI知识库：打造自己专属知识库</Title>
                </div>
                <ThemeToggle style={{marginRight: '20px'}}/>
            </Header>
            <Layout style={{padding: '24px 12px'}}>
                <Sider
                    width={"20%"}
                    style={{
                        background: 'transparent',
                        marginRight: 16,
                    }}
                >
                    <div style={{
                        background: '#fff',
                        borderRadius: borderRadiusLG,
                        boxShadow: 'var(--shadow)',
                        overflow: 'hidden',
                        height: '100%',
                        backgroundImage: `var(--card-bg)`,
                        border: `1px solid var(--border-color)`
                    }}>
                        <AiConversations
                            conversations={conversations}
                            conversationId={conversationId}
                            setConversationId={setConversationId}
                            setConversations={setConversations}
                            onRemove={onConversationRemove}
                            onTitleUpdate={onTitleUpdate}
                        />
                    </div>
                </Sider>
                <Layout style={{width: "60%", background: 'transparent'}}>
                    <Content
                        style={{
                            background: '#fff',
                            borderRadius: borderRadiusLG,
                            boxShadow: 'var(--shadow)',
                            padding: 0,
                            overflow: 'hidden',
                            height: '100%',
                            backgroundImage: `var(--card-bg)`,
                            border: `1px solid var(--border-color)`
                        }}
                    >
                        <AIMessageContent
                            conversationId={conversationId}
                            uploadedFiles={uploadedFiles}
                        />
                    </Content>
                </Layout>
                <Layout
                    style={{
                        width: "20%",
                        background: 'transparent',
                        marginLeft: 16,
                    }}
                >
                    <Content
                        style={{
                            background: '#fff',
                            borderRadius: borderRadiusLG,
                            boxShadow: 'var(--shadow)',
                            padding: 16,
                            height: '100%',
                            backgroundImage: `var(--card-bg)`,
                            border: `1px solid var(--border-color)`
                        }}
                    >
                    <FeishuDocs/>
                    </Content>
                </Layout>
            </Layout>
            <FileUpload onFilesParsed={handleFilesParsed}/>
        </Layout>
    );
};
